<template>
  <div>
    <el-container>
      <el-header class="header">
        <div class="system">
          <img src="http://47.94.137.36:8080/images/xh829.png">
          <span style="font-weight: 700;font-size: 18px;margin-left: 10px">科技OA协同办公系统</span>
        </div>
        <el-menu
          mode="horizontal"
          background-color="#996699"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="handleSelect"
          class="menu"
        >
          <el-menu-item v-for="(item,index) in navigatelist" :key="index" :index="item.name">{{ item.name }}</el-menu-item>
        </el-menu>
        <div class="system-right">
          <p><el-icon style="margin-right: 5px;"><Iphone /></el-icon>手机版</p>
          <p><el-icon style="margin-right: 5px;"><ChatRound /></el-icon>即时通讯</p>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <img src="http://47.94.137.36:8080/upload/face/1_7243.jpg" alt="">
              <span>管理员</span>
              <el-icon><CaretBottom /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="Tools">个人设置</el-dropdown-item>
                <el-dropdown-item :icon="Bell">提醒信息</el-dropdown-item>
                <el-dropdown-item :icon="PictureFilled">修改头像</el-dropdown-item>
                <el-dropdown-item :icon="UserFilled">账号(admin)</el-dropdown-item>
                <el-dropdown-item :icon="SwitchButton">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" style="height:955px;background-color: #F8F9FB;" v-show="isCollapse">
          <div style="background-color: #B598B5;display: flex;align-items: center;justify-content: space-between;padding: 0 10px;height: 44px">
            <div style="display: flex;align-items: center;">
              <!-- <svg t="1721385868860" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6359" width="20" height="20"><path d="M872.8 112H151.2c-48.1 0-87.2 39.6-87.2 88.3V650c0 48.7 39.1 88.3 87.2 88.3h298.6L290 912h444L574.2 738.3h298.6c48.1 0 87.2-39.6 87.2-88.3V200.3c0-48.7-39.1-88.3-87.2-88.3z m-745.4 88.3c0-13.3 10.7-24.1 23.8-24.1h721.6c13.1 0 23.8 10.8 23.8 24.1v305.1H127.4V200.3z" fill="#ffffff" p-id="6360"></path></svg> -->
              <span style="color: #fff;margin-left: 5px">{{counterStore.sideValue}}</span>
            </div>
            <div>
              <van-icon name="search" color="#fff" size="20"/>
              <van-icon name="wap-nav" color="#fff" size="20" style="margin-left: 10px;" @click="isCollapse=false"/>
            </div>            
          </div>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @select="handleSelectSide"
            router
          >
            <el-sub-menu :index="item.name" v-for="item in sideList" :key="item._id" v-show="item.navigation==counterStore.sideValue">
              <template #title>
                <!-- <el-icon><location/></el-icon> -->
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item v-for="item2 in item.children" :key="item2._id" :index="item2.router">{{item2.name}}</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <!-- <el-menu-item v-for="item in sideList" :key="item._id" v-show="item.navigation==navigateValue">
              <span>{{item.name}}</span>
            </el-menu-item> -->
          </el-menu>
        </el-aside>
        <el-aside width="30px" style="height: 955px;background-color: #B598B5;padding-left: 3px;" v-show="isCollapse==false">
          <van-icon name="wap-nav" color="#fff" size="20" @click="isCollapse=true"/>
          <p style="color: #fff;">打开导航栏</p>
        </el-aside>
        <el-main>
          <el-tabs type="border-card" style="width: 100%;margin-left: -20px;margin-top: -20px;">
            <el-tab-pane v-for="(item,index) in tabPaneList" :key="index" :label="item.name" :closable="item.name=='首页'?false:true">
              <RouterView/>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { AxiosServer } from '@/utils';
import { useCounterStore } from '@/stores/counter';
import {UserFilled,SwitchButton,PictureFilled,Bell,Tools,} from '@element-plus/icons-vue'
const counterStore=useCounterStore()
const router=useRouter()
const isCollapse = ref(true)
const navigatelist=ref([])
const sideList=ref([])
const tabPaneList=ref([{name:'首页',router:'about'}])

const handleSelect = (key) => {
  counterStore.handleSelect(key)
}
//点击侧边栏，切换面包屑
const handleSelectSide=(key,keyPath)=>{
  console.log(key,keyPath);
  sideList.value.forEach(item=>{
    console.log(!item.children);
    // if(!item.children){
    //   tabPaneList.value.push({name:item.name,router:item.router})
    //   localStorage.setItem('tabPaneList',JSON.stringify(tabPaneList.value))
    // }else{
    //   item.children.forEach(item2=>{
    //     if(item2.router==key){
    //       tabPaneList.value.push({name:item2.name,router:item2.router})
    //       localStorage.setItem('tabPaneList',JSON.stringify(tabPaneList.value))
    //     }
    //   })
    // }
  })
}

//移除面包屑


//顶部导航
const getNavigate=async()=>{
  let {data:{navigateList}}=await AxiosServer.get("/wrj/getNavigate")
  navigatelist.value=navigateList
}

//侧边导航
const getSide=async()=>{
  let {data:{list}}=await AxiosServer.get("/wrj/getSide")
  sideList.value=list
  console.log(list);
}

onMounted(()=>{
  getNavigate()
  getSide()
  localStorage.setItem('tabPaneList',JSON.stringify(tabPaneList.value))
})

</script>

<style lang="scss" scoped>
.header{
  background-color: #996699;
  display: flex;
  .system{
    color: #fff;
    display: flex;
    align-items: center;
    line-height: 60px;
    width: 20%;
  }
  .menu{
    width: 70%;
  }
  .system-right{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 15%;
    color: #fff;
    p{
      display: flex;
      align-items: center;
    }
    .el-dropdown-link{
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100px;
      color: #fff;
    }
    img{
      width: 25px;
      height: 25px;
      border-radius: 50px;
    }
  }
}
</style>
